<route lang="json5"  type="page" >
{ 
  style: {  
    navigationBarTitleText: '企业成果' 
  },
}
</route>
<template> 
	<PageLayout :navbarShow="false" style="background-color: #f7f7f7;"> 
 
		<!-- <wd-tabs v-model="tab" sticky @click="changeTab"  >
		  <block v-for="item in tablist" :key="name">
		    <wd-tab :title="item.name" :name="item.type">
		    </wd-tab>
		  </block>
		</wd-tabs> -->
		<wd-segmented
		  
		 :options="tablist"   @click="changeTab">
		  <template #label="{ option }">
		     <view class="section-slot">
		        <view class="tabclass" >{{ option.value }}</view>
		     </view>
		   </template>
		 </wd-segmented>
		 <uni-list v-if="currentTab==0">
		 						<uni-list-item direction="row" v-for="item in newsArr" :key="item.id" :title="item.productname" :note="'型号:'+item.productModel " :to="'/pages/main/company/productdetail?id='+item.id">
		 						<!-- 通过header插槽定义列表左侧的图片显示，其他内容通过List组件内置属性实现-->
		 						<template v-slot:header>
		 							<view class="uni-thumb">
		 								<!-- 当前判断长度只为简单判断类型，实际业务中，根据逻辑直接渲染即可 -->
		 								<image :src="item.imageurl" mode="scaleToFit"></image>
		 							</view>
		 						</template>
		 					</uni-list-item>
		  </uni-list>
		  <uni-list v-if="currentTab==1">
		  						<uni-list-item direction="row" v-for="item in newsArr" :key="item.id" :title="item.patentTitle" :note="'领域:'+item.patentField_dictText " :to="'/pages/main/company/patentdetail?id='+item.id">
		  						<!-- 通过header插槽定义列表左侧的图片显示，其他内容通过List组件内置属性实现-->
		  						<template v-slot:header>
		  							<view class="uni-thumb">
		  								<!-- 当前判断长度只为简单判断类型，实际业务中，根据逻辑直接渲染即可 -->
		  								<image :src="item.imageurl" mode="scaleToFit"></image>
		  							</view>
		  						</template>
		  					</uni-list-item>
		   </uni-list>
		   <uni-list v-if="currentTab==2">
		   						<uni-list-item direction="row" v-for="item in newsArr" :key="item.id" :title="item.paperTitle" :note="'领域：'+item.paperFieldType_dictText " :to="'/pages/main/company/paperdetail?id='+item.id">
		   						<!-- 通过header插槽定义列表左侧的图片显示，其他内容通过List组件内置属性实现-->
		   						<template v-slot:header>
		   							<view class="uni-thumb">
		   								<!-- 当前判断长度只为简单判断类型，实际业务中，根据逻辑直接渲染即可 -->
		   								<image :src="item.imageurl" mode="scaleToFit"></image>
		   							</view>
		   						</template>
		   					</uni-list-item>
		   		  </uni-list>
		 
		 <view v-if="newsArr.length==0" style="text-align:center;height:87vh;"> 
		 	<image src="/static/images/nodata.png" mode="aspectFit" style="width:360rpx;"></image>
		     <view style="margin-top:-100rpx;font-size:30rpx;">当前无数据</view>
		 </view> 
		 
	</PageLayout>
</template>

<script>
	import {http } from "@/utils/http"
	export default {
		components: {},
		data() {
			return {
			 
				tablist:[ "产品" , "专利", "论文" ],
				list:[],
				list1:[],//产品
				list2:[],//专利
				list3:[],//论文
				newsArr:[],
				currentTab:0
			};
		},
		onLoad() {
			this.loadData()
		},
		methods: {
			// load(data, ended) {
			// 	if (ended) {
			// 		this.formData.status = 'noMore'
			// 	}
			// },
			loadData(){
				uni.showLoading({
					title:"加载数据中..."
				})
				http.get("/api/product/list").then(res=>{
				 uni.hideLoading() 
				 for(var i=0;i<res.result.records.length;i++){
					 if(res.result.records[i].imageurl){
						 var str1=res.result.records[i].imageurl.split(",")
					res.result.records[i].imageurl=getApp().globalData.imgUrl+str1[0]
						 
					 }
					 else
					 res.result.records[i].imageurl="/static/images/nopic.png"
				 }
				 this.list1=res.result.records
				 this.newsArr=this.list1;
				 console.log(res)
			 })
			},
			loadPatent(){
				uni.showLoading({
									title:"加载数据中..."
								})
								http.get("/api/patent/list").then(res=>{
									console.log(res)
								 uni.hideLoading() 
								 for(var i=0;i<res.result.records.length;i++){
									 if(res.result.records[i].imageurl){
										var str1=res.result.records[i].imageurl.split(",")
										res.result.records[i].imageurl=getApp().globalData.imgUrl+res.result.records[i].imageurl
										 
									 }
									 else
									 res.result.records[i].imageurl="/static/images/nopic.png"
								 }
								 this.list2=res.result.records
								 this.newsArr=this.list2;
								 console.log(res)
				})
			},
			loadPapers(){
				uni.showLoading({
									title:"加载数据中..."
								})
								http.get("/api/papers/list").then(res=>{
								 uni.hideLoading() 
								 console.log(res)
								 for(var i=0;i<res.result.records.length;i++){
									if(res.result.records[i].imageurl){
										var str1=res.result.records[i].imageurl.split(",")
										res.result.records[i].imageurl=getApp().globalData.imgUrl+res.result.records[i].imageurl
									  }  else
									 res.result.records[i].imageurl="/static/images/nopic.png"
								 }
								 this.list3=res.result.records
								 this.newsArr=this.list3;
								 console.log(res)
				})
			},
			changeTab(e){
				console.log(e)
				if(e.value=="产品")
				this.currentTab=0;
				if(e.value=="专利")
				this.currentTab=1;
				if(e.value=="论文")
				this.currentTab=2;
				 uni.showLoading({
				 	title:'加载中...'
				 })
				if(this.currentTab==0){
					this.newsArr=this.list1;
				}	
				if(this.currentTab==1){
					if(this.list2.length==0){
						 this.loadPatent();
						 return;
					} 
					this.newsArr=this.list2;
				}	
				if(this.currentTab==2){
					if(this.list3.length==0){
						 this.loadPapers();
						 return;
					} 
					this.newsArr=this.list3;
				}	
					
				uni.hideLoading() 
				 
			}
			
		},
		/**
		 * 下拉刷新回调函数
		 */
		onPullDownRefresh() {
			this.formData.status = 'more'
			this.$refs.udb.loadData({
				clear: true
			}, () => {
				this.tipShow = true
				clearTimeout(this.timer)
				this.timer = setTimeout(()=>{
					this.tipShow  = false
				},1000)
				uni.stopPullDownRefresh()
			})
		},
		/**
		 * 上拉加载回调函数
		 */
		onReachBottom() {
			this.$refs.udb.loadMore()
		}
	};
</script>

<style lang="scss" scoped>
	@import '@/common/uni-ui.scss';
 
	.tips {
		color: #67c23a;
		font-size: 14px;
		line-height: 40px;
		text-align: center;
		background-color: #f0f9eb;
		height: 0;
		opacity: 0;
		transform: translateY(-100%);
		transition: all 0.3s;
	}

	.tips-ani {
		transform: translateY(0);
		height: 40px;
		opacity: 1;
	}

	.content {
		width: 100%;
		display: flex;
		line-height: 120px;
		text-align: center;
	}
	 

	.list-picture {
		width: 100%;
		height: 145px;
	}

	.thumb-image {
		width: 100%;
		height: 100%;
	}

	.ellipsis {
		display: flex;
		overflow: hidden;
	}

	.uni-ellipsis-1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.uni-ellipsis-2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.wd-segmented {
	  border-radius: 0px;    /* 圆角 */
	  height: 40px;           /* 高度 */
	  background: #ffffff;    /* 背景色 */
	}
	   
	 
	 
	.tabclass  {
		font-size:32rpx;  
		color:#0b9fee;
	}
	 
</style>



 